Widget Settings
The settings section allows you to configure how the widget will work and display for the end users.
Setting options are:
Color Settings
| Option | Value | Description |
|---|---|---|
| Slider indicator color | HEX Color | This color will set the color of the active indicator of the slider. |
| Container background color | HEX Color | This will be the background color of the main slider container. |
| Container background image | Image | When set, this image will be used as the container background image. The image is set with a Cover property, where the background image will display and maintain aspect ratio. As the screen scales it will crop on smaller screens. |
| Container Video Background | MP4 Video | Allows the user to set a video as the background for the container. Note Ensure video size is under 2 megs to ensure it does not impact the site load time |
| Container video background color overlay | RGBA | When set, this color will overlay the background video. You can adjust the transparency to match your site colors |
| Video description | Text | When a video background is set, you must add description of what is happening in the video. This is required for ADA compliance |
Slider Preferences
| Option | Value | Description |
|---|---|---|
| Transition Effect | Option | The transition effect allows you to set how the slides will transition. Slide will slide between one slide to the next where Fade will cross fade between the slides. |
| Transition Speed | Number | The speed, in Milliseconds each slide will transition to the next. |
| Number of slides per view | Number | How many slides are visable on each screen. Default is 1 |
| Show Arrow Indicator | Yes / No | This option, when set to Yes will show arrows on the right and left of the slider. Clicking them will cause the slide to transition |
| Gap between slides | Number | The gap between slides is the gap or space between each slide number is in pixels |
| Pause between slides | Number | A number, in Milliseconds representing how long the slider should pause before moving to the next slide |
| Container Height | Number | The height, in pixels the slider will be. You must add the px after the number e.g 450px |
| Container Class | Class Name | A class name to append to the container class. ``` Use class name only |
| Auto Play | Yes / No | This option, when set to yes, will auto play the slider. |
| Show Slide Indicator | Yes / No | When this option is set to yes, the slide indicator will display at the bottom of the slider |
::: tip Number of slides The number of slides setting can also use point values, such as 1.5 or 1.25. This will allow you to have a partial slide showing on the screen. :::
Divider Settings
| Option | Value | Description |
|---|---|---|
| Use divider | Yes/No | The container class will add a css class to the main container. This can be any valid css class name use only the classes name |
| Divider Color | HEX Color | The container background color will set the background color of the container. To use, simply select the color picker and select the color. You may also use the HEX input to put in exact colors using their HEX value. |
| Gradient End Color | Hex / Alpha color | The divider, by default, will gradient from the Divider Color to the Gradient End Color. Setting this allows you to set how that transition looks and the alpha (transparency) as well. |
| Divider Type | Option | The divider type has 4 options to choose from |
| Divider Height | Number | This allows you to control the height of the divider. When adding a number here it will override the default divider height. This can be helpful in adjusting the gap between sections |